<template>
  <div id="app" v-cloak>
		<transition :name="slideDirect">
			<router-view></router-view>
		</transition>
    <lg-preview></lg-preview>
    <pop-ups></pop-ups>
	<datepicker-mobile></datepicker-mobile>
  </div>
</template>

<script>
	import Vue from 'vue'
	import VueRouter from 'vue-router'
	import vuePicturePreview from 'vue-picture-preview'
	import popUps from './components/pop-ups'
	import datepickerMobile from './components/datepicker-mobile'
	import desktop from './components/desktop.vue'
	import cloudLabel from './components/cloud_label.vue'
	import cloudLabelDetail from './components/cloud_label_detail.vue'
	import printLog from './components/print_log.vue'

	Vue.use(VueRouter)
	Vue.use(vuePicturePreview)
	Vue.use(popUps)
	Vue.use(datepickerMobile)
	
	let router = new VueRouter({
	    routes:[
        {
            path:'*',
            redirect:'/desktop'
        },
        {
            path:'/desktop',
            name:'desktop',
            component:desktop
        },
        {
            path:'/cloud_label',
            name:'cloudLabel',
            component:cloudLabel
        },
		{
			path:'/cloud_label_detail',
			name:'cloudLabelDetail',
			component:cloudLabelDetail
		},
		{
			path:'/prit_log',
			name:'printLog',
			component:printLog
		}
      ],
      //mode:'history'
	})
	export default {
	  name: 'app',
	  data:function(){
	  	return {
				slideDirect:"slide-left",
				slideArr:[]
			};
	  },
		mounted:function(){
			var _this=this;
			var hash=location.hash;
			_this.slideArr.push(hash);
			window.onload=function(){
				document.getElementById("app").classList.add("app-left");
			}
		},
	  router:router,
		watch:{
			$route:function(){
				var _this=this;
				var mSlideArr=_this.slideArr
				var hash=location.hash;
				if(mSlideArr.length>0&&mSlideArr[mSlideArr.length-2]==hash){
					_this.slideDirect="slide-right";
					mSlideArr.splice(mSlideArr.length-1,1);
				}else{
					mSlideArr.push(hash);
					_this.slideDirect="slide-left";
				}
			}
		}
	}
</script>

<style scoped>
#app{
	left:100% ;
	position: relative;
	transition: transform .5s;
	
}
.app-left{
	transform: translateX(-100%);
}
.slide-left-enter{
	transform: translateX(100%);
}
.slide-left-enter-to{
	transform: translateX(0);
}
.slide-left-leave{
	transform: translateX(0);
}
.slide-left-leave-to{
	transform: translateX(-100%);
}
.slide-right-enter{
	transform: translateX(-100%);
}
.slide-right-enter-to{
	transform: translateX(0);
}
.slide-right-leave{
	transform: translateX(0);
}
.slide-right-leave-to{
	transform: translateX(100%);
}
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active{
	transition:all .5s;
	position: absolute;
	height: 100%;
	backface-visibility: hidden;
}
</style>
